<template>
  <div style="width:100%" class="treetool">
    <el-row style="width:100%" type="flex" justify="space-betwenn">
      <el-col><i class="el-icon-office-building"></i>{{ item.name }}</el-col>
      <el-col>
        <div style="text-align:right">
          <span class="span">{{ item.manager }}</span>
          <span>
            <el-dropdown @command="mycommand">
              <span class="el-dropdown-link">
                操作<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="one">添加子部门</el-dropdown-item>
                <el-dropdown-item command="two" v-if="!isTop"
                  >查看部门</el-dropdown-item
                >
                <el-dropdown-item command="three" v-if="!isTop"
                  >删除部门</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { delDepartmentApi } from '@/api/departments'
export default {
  name: 'treetool',
  props: ['item', 'isTop'],
  data () {
    return {}
  },
  methods: {
    async mycommand (command) {
      if (command === 'three') {
        try {
          await this.$confirm('是否删除该部门?', '警告')
          await delDepartmentApi(this.item.id)
          this.$emit('refreshData')
        } catch {
          console.log('取消删除')
        }
      } else if (command === 'one') {
        this.$emit('changeAddShow', this.item)
      } else {
        this.$emit('changeEditShow', this.item)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.treetool {
  .span {
    font-size: 14px;
    margin-right: 34px;
  }
}
</style>
